<template>
  <div class="game-details">

    <div class="content">
      <div class="query">
        <nut-input v-model="queryGame" :placeholder="t('club_page_ss')" clearable @update:model-value="onClickSearch">
          <template #left>
            <iconpark-icon icon-id="sousuo" size=".8rem" class="refresh"></iconpark-icon>
          </template>
        </nut-input>
      </div>

      <div class="main_content" v-if="state.type == 1" :style="contentStyle()">
        <div class="tab">
          <div v-for="(v, i) in threeGameKinds" :key="i" :class="state.agentId == v?.id && 'tab_ac'"
            @click="onClickTab(v)">
            <span v-if="v.id == -1">{{ unserialize(v.name, false) }}</span>
            <img v-else :src="settings.backend_upload + v.picture_pc" alt="" />
          </div>
        </div>
        <div class="games_box">
          <nut-tabs v-model="state.lableActive" @change="changeLableTab">
            <nut-tab-pane :title="unserialize(item.kind_name, true)" :pane-key="item.kindId"
              v-for="(item, i) in state.kindList" :key="i">
              <div :style="gameBoxStyle()">
                <nut-infinite-loading v-model="infinityValue" load-more-txt=" " :has-more="hasMore" @load-more="onLoad">
                  <!-- <nut-empty v-if="!hasLogin && state.lableActive != 0" 
                    :description="t('gameDetail_page_login')"></nut-empty> -->
                  <nut-empty v-if="result.list.length == 0" :description="t('nomore_data')"></nut-empty>

                  <div class="game_list" v-else>
                    <div class="item" v-for="(v, i) in result.list" :key="i">
                      <GameItem :item="v" :type="state.type"></GameItem>
                    </div>
                  </div>
                </nut-infinite-loading>
              </div>
            </nut-tab-pane>
          </nut-tabs>
        </div>
      </div>

      <div v-if="state.type == 2">
        <nut-empty v-if="threeGameKinds.length == 0" :description="t('nomore_data')"></nut-empty>
        <div class="game_list" v-else>
          <div class="item1" v-for="(v, i) in threeGameKinds" :key="i">
            <GameItem :item="v" :type="state.type"></GameItem>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { onBeforeMount, onMounted, reactive, ref, watch } from "vue";

import { storeToRefs } from "pinia";
import { Page } from "@/store/page";
import pinia from "@/store";
import { NetPacket } from "@/netBase/NetPacket";
import H5Websocket from "@/net/Net1";
import { NetMsgType } from "@/netBase/NetMsgType";
import { MessageEvent2 } from "@/net/MessageEvent2";
import { useI18n } from "vue-i18n";
import { Local } from "@/utils/storage";
import { unserialize } from "@/utils/useStoreMethods";
import { User } from "@/store/user";
import GameItem from "@/components/GameItem.vue";
const { appHeight, allCollected } = storeToRefs(User(pinia));

const route = useRoute();

const { settings, homeGameData } = storeToRefs(Page(pinia));

const contentStyle = () => {
  return { height: `calc(${appHeight.value}px - 54vw)` };
};
const gameBoxStyle = () => {
  return { height: `calc(${appHeight.value}px - 54vw - 11.73333vw)` };
};
const { t } = useI18n();

const queryGame = ref("");
const infinityValue = ref(false);
const hasMore = ref(true);
const state = reactive({
  // 游戏平台id  -1为查看全部的游戏
  agentId: -1,

  // 自定义标签 0为全部 1为热门 -2为收藏，-3为最近
  lableId: 0,

  // //也表示场馆id -1 为所有场馆
  kindId: -1,

  // 右上方侧标签点击样式
  lableActive: 0,

  // 所有标签集合
  kindList: [] as any,

  // 当前点击的游戏
  currentGame: null as any,

  // 游戏输入框节流
  timer: null as any,
  // 游戏类型
  type: 1,
});
const params: any = reactive({
  // 参数
  pageSize: 15,
  page: 1,
});
const result: any = reactive({
  // 结果
  total_page: 0,
  // 游戏集合
  list: [],
});
const first = {
  kind_name: '{"zh-CN":"全部","vi-VN":"tất cả","en-US":"All"}',
  kindId: 0,
  key: 0,
  icon_after: "/img/game/all_un.webp",
  icon_before: "/img/game/all.webp",
};
const first_hot = {
  kind_name: '{"zh-CN":"热门","vi-VN":"Phổ biến","en-US":"Popular"}',
  kindId: 0,
  key: 0,
  icon_after: "/img/game/all_un.webp",
  icon_before: "/img/game/all.webp",
};
const last = [
  // {
  //   kind_name: "{\"zh-CN\":\"热门\",\"vi-VN\":\"gần đây\",\"en-US\":\"Recent\"}",
  //   kindId: 1,
  //   key: 1,
  //   icon_after: '/img/game/zuijin_un.webp',
  //   icon_before: '/img/game/zuijin.webp'
  // },
  {
    kind_name: '{"zh-CN":"最近","vi-VN":"gần đây","en-US":"Recent"}',
    kindId: -3,
    key: 2,
    icon_after: "/img/game/zuijin_un.webp",
    icon_before: "/img/game/zuijin.webp",
  },
  {
    kind_name: '{"zh-CN":"收藏","vi-VN":"Yêu thích","en-US":"Favorites"}',
    kindId: -2,
    key: 3,
    icon_after: "/img/game/shoucang_un.webp",
    icon_before: "/img/game/shoucang.webp",
  },
];

let gameName = ref("");
let threeGameKinds = ref<any[]>([]);

const getHomeData = () => {
  const data = homeGameData.value.find((e: any) => e.id == Number(state.kindId));
  gameName.value = unserialize(data.name, false); // name as string
  if ([3, 4].includes(data.id)) {
    state.type = 2;
    threeGameKinds.value = data.three_platform;
    return;
  }
  // const item = data?.find((e: any) => e.name[lang.value].toUpperCase() == gameName.value)
  let a: any = {
    id: -1,
    name: { "zh-CN": "全部", "vi-VN": "tất cả", "en-US": "All" },
    picture_pc: "game_icons/icon_pg.png",
  };
  threeGameKinds.value = [a, ...data.three_platform];
};

// const handlePlatformKind = (res: any) => {
//   if (res.label.length > 0) {
//     state.kindList = [first, ...res.label, ...last]
//   } else {
//     state.kindList = [first, ...last]
//   }
// }



//切换上方热门标签事件
const changeLableTab = (item: any) => {
  state.lableId = Number(item.paneKey);
  state.lableActive = Number(item.paneKey);
  resetData();
  queryData();
};

const handleQuery = (res: any) => {
  result.list = res.info;
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_look_for_game_name, null);
};
const onClickSearch = () => {
  if (queryGame.value) {
    MessageEvent2.addMsgEvent(
      NetMsgType.msgType.msg_notify_look_for_game_name,
      handleQuery
    );
    if (state.timer != null) {
      clearTimeout(state.timer);
    }
    state.timer = setTimeout(() => {
      let tb = NetPacket.req_look_for_game_name();
      tb.agentId = state.agentId;
      tb.kindId = state.kindId;
      tb.name = queryGame.value;
      H5Websocket.sendMessageHandler(tb);
    }, 500);
  }
};

// 点击厂商切换
const onClickTab = (v: any) => {
  if (v.id == 0) {
    state.lableId = 0;
    state.lableActive = -1;
  }
  Local.set("agentId", v.id);
  console.log("v", v);
  state.agentId = v.id;
  state.kindList = [];
  resetData();
  getInitData(state.agentId);
  queryData();
};

const resetData = () => {
  params.page = 1;
  result.list = [];
  queryGame.value = ''
  infinityValue.value = false;
  hasMore.value = true;
};

const onLoad = () => {
  params.page++;
  queryData();
};
// 返回游戏列表数据
const handleGames = (res: any) => {
  result.list = [...result.list, ...res.info];
  if (res.info.length < params.pageSize) {
    hasMore.value = false;
  }
  infinityValue.value = false;
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_get_games_in_platform, null);
};

const queryData = () => {
  // 查询
  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_get_games_in_platform,
    handleGames
  );
  const query = NetPacket.req_get_games_in_platform();
  query.agentId = state.agentId;
  query.kindId = state.kindId;
  query.lableId = state.lableId;
  query.page = params.page;
  query.pageSize = params.pageSize;
  H5Websocket.sendMessageHandler(query);
};

const getInitData = (_agentId: any) => {
  // if (agentId == -1) {
  // const req = NetPacket.req_get_kind_in_platform();
  // req.agentId = agentId
  // req.kindId = kindId
  // req.pageSize = 10
  // H5Websocket.sendMessageHandler(req);
  //   state.kindList = last
  // } else {
  //   state.lableId = 0
  //   state.lableActive = 0

  // }

  state.kindList = [_agentId > 0 ? first : first_hot, ...last];
};
onBeforeMount(() => {
  const { agent_id, venue_id } = route.query;
  venue_id && (state.kindId = Number(venue_id));

  getHomeData();
  if (state.type == 1) {
    let agentId = Local.get("agentId");
    if (agentId) {
      state.agentId = agentId;
    }
    if (agent_id) {
      state.agentId = Number(agent_id);
    }

    getInitData(state.agentId);
    queryData();
  }
});
onMounted(() => { });

watch(
  () => queryGame.value,
  (n: any, o: any) => {


    console.log("n=>" + n, "o=>" + o);
    if (o && !n) {
      resetData();
      queryData();
    }
  }
);
watch(
  () => allCollected.value,
  (n: any, o: any) => {
    console.log("n=>" + n, "o=>" + o);
    if (state.lableActive == -2) {
      let gameId = Local.get("gameId");
      result.list = result.list.filter((e: any) => e.id != gameId)
    }

  }
);
</script>

<style scoped lang="scss">
.game-details {
  display: grid;
  grid-template-rows: auto 1fr;

  :deep(.nut-tabs .nut-tabs__titles) {
    padding: 0;
    height: 44px;
  }

  .amount_box {
    display: flex;
    align-items: center;

    >span {
      margin: 0 6px;
    }
  }

  .content {
    width: 100%;
    padding: 0 10px;
    margin-top: 14px;
  }

  .main_content {
    display: flex;

    >.games_box {
      width: 276px;
      height: 100%;
      padding-left: 12px;
    }
  }

  .tab {
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 0 4px;

    font-size: 12px;

    div {
      display: flex;
      width: 68px;
      height: 40px;
      // padding: 10px;
      margin-bottom: 8px;
      justify-content: center;
      align-items: center;
      border-radius: 8px;
      background: #131232;
      box-shadow: 0.5px 0.5px 1px 0px #2e296b inset;

      >img {
        width: 68px;
        height: 40px;
      }

      >span {
        width: 68px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .tab_ac {
      color: #fff;
      background: linear-gradient(180deg, #5567ff 0%, #9e1eff 100%);
      box-shadow: 0.5px 0.5px 1px 0px #9b9eff inset;
    }
  }

  .query {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    :deep(.nut-input--border) {
      border-bottom: none;
    }

    // :deep(.nut-input-left-box){
    //   margin-right: ;
    // }
    &:deep(.nut-input) {
      height: 36px;
      padding: 8px;
      border-radius: 8px;
      background: #1d1c3c;

      input {
        &::placeholder {
          color: #504f6f;
        }
      }
    }
  }

  .scroll-view {
    height: 74vh;
    overflow: auto;
  }

  .game_list {
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;

    >div {
      width: 82px;
      height: 108px;
      margin-right: 8px;
      margin-bottom: 8px;
      border-radius: 8px;
      background: #1a1944;
      position: relative;

      &:nth-child(3n) {
        margin-right: 0;
      }
    }

    .item {
      // width: 100%;
      // width: 82px;
      // height: 108px;
      // margin-right: 8px;
      // margin-bottom: 8px;
      // border-radius: 8px;
      // background: #1A1944;
      // position: relative;
    }

    .item1 {
      width: 112px;
      height: 148px;
    }
  }
}

.test {
  padding: 12px 0 12px 20px;
  border-top: 1px solid #eee;
}
</style>
